<template>
	<el-form
		layout="inline"
		:class="['buildForm', hyFormConfig.type === 'view' ? 'noStyle' : '']"
		ref="hyFormRef"
		:label-width="hyFormConfig.labelWidth || '120px'"
		:model="hyForm"
	>
		<el-row :gutter="20">
			<template v-for="(item, key) of hyFormFields">
				<!-- 单选框 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :offset="setOffset(item)" :key="`${key}_col`" v-if="setRemove(item, 'radio')">
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-radio-group v-model="hyForm[key]" @change="(option:Event)  => {item.change ? item.change(option) : null;}">
							<el-radio v-for="option in item.options" :value="option.value" :label="option.label" :key="option">{{ option.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<!-- input输入框 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :offset="setOffset(item)" :key="`${key}_col`" v-if="setRemove(item, 'input')">
					<!-- 提示框，默认不展示 -->

					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '输入')">
						<el-tooltip
							:disabled="!item.showTooltip ?? true"
							:effect="item.tooltipProps?.effect || 'dark'"
							:content="item.tooltipProps?.content || ''"
							:raw-content="item.tooltipProps?.rawContent || false"
							:placement="item.tooltipProps?.placement || 'top-start'"
						>
							<el-input
								:show-word-limit="item.showWordLimit || false"
								:show-password="item.showPassword || false"
								:disabled="setDisabled(item)"
								v-model.trim="hyForm[key]"
								:maxlength="item.maxlength || 200"
								:placeholder="setPlaceholder(item, '输入')"
								@focus="(e:Event) => setFocus(item, e)"
								@blur="(e:Event) => setBlur(item, e)"
								@click="(e:Event) => setClick(item, e)"
								:formatter="item.formatter?(value:string)=> item.formatter(value):null"
							>
							</el-input>
						</el-tooltip>
					</el-form-item>
				</el-col>
				<!-- input手机号输入框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'inputPhone')"
				>
					<!-- 提示框，默认不展示 -->

					<el-form-item
						:prop="key"
						:label="item.label"
						:label-width="setLabelWidth(item)"
						:rules="[
							{ required: item.required, message: '请输入手机号码', trigger: 'blur' },
							{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' },
						]"
					>
						<el-input-number
							:controls="item.controls || false"
							:disabled="setDisabled(item)"
							v-model.trim="hyForm[key]"
							:maxlength="11"
							:placeholder="setPlaceholder(item, '输入')"
							@focus="(e:Event) => setFocus(item, e)"
							@blur="(e:Event) => setBlur(item, e)"
							@click="(e:Event) => setClick(item, e)"
							:formatter="item.formatter?(value:string)=> item.formatter(value):null"
						>
						</el-input-number>
					</el-form-item>
				</el-col>
				<!-- 数字输入框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'inputNumber')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '输入')">
						<el-input-number
							:placeholder="setPlaceholder(item, '输入')"
							class="flex1"
							:controls="false"
							:precision="item.precision"
							:step="item.step || 1"
							:max="item.max"
							:min="item.min"
							:maxlength="item.maxlength || 200"
							:disabled="setDisabled(item)"
							v-model.number="hyForm[key]"
							@focus="(e:Event)  => setFocus(item, e)"
							@blur="(e:Event) => setBlur(item, e)"
						/>
						<span
							v-if="item.append"
							style="
								background-color: #f5f7fa;
								color: #909399;
								display: inline-block;
								border: 1px solid #dcdfe6;
								border-radius: 4px;
								padding: 0 20px;
								height: 40px;
								line-height: 40px;
							"
						>
							{{ item.append }}
						</span>
					</el-form-item>
				</el-col>
				<!-- 金额输入框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'inputMoney')"
				>
					<el-form-item
						:prop="key"
						:label="item.label"
						:label-width="setLabelWidth(item)"
						:rules="
							item.rules || [
								{
									pattern: /^(\d{1,3}(,\d{3})*|\d+)(\.\d{1,2})?$/,
									message: '请输入正确的金额',
								},
							]
						"
					>
						<el-input
							:disabled="setDisabled(item)"
							v-model.trim="hyForm[key]"
							:maxlength="item.maxlength || 15"
							:placeholder="setPlaceholder(item, '输入')"
							@focus="(e:Event) => setFocus(item, e)"
							@click="(e:Event) => setClick(item, e)"
							:parser="(value:any) => value.replace(/\¥\s?|(,*)/g, '')"
							:formatter="(value:any) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
						>
						</el-input>
					</el-form-item>
				</el-col>
				<!-- 万元输入框 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :key="`${key}_col`" v-if="setRemove(item, 'inputFunny')">
					<!-- 提示框，默认不展示 -->
					<el-form-item
						:prop="key"
						:label="item.label"
						:label-width="setLabelWidth(item)"
						:rules="[
							{
								required: item.required,
								pattern: /^(0|[1-9]\d{0,5})(\.(?!(0$|.*0$)\d*)\d{1,6})?$/,
								message: '请输入整数或小数且最多支持小数点前后各6位',
								trigger: ['blur', 'change'],
							},
						]"
					>
						<el-input
							:show-word-limit="item.showWordLimit || false"
							:show-password="item.showPassword || false"
							:disabled="setDisabled(item)"
							v-model.trim="hyForm[key]"
							:maxlength="item.maxlength || 200"
							:placeholder="setPlaceholder(item, '输入')"
						>
							<template #append> 万 </template>
						</el-input>
					</el-form-item>
				</el-col>
				<!-- 下拉框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'select')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-tooltip
							:disabled="!item.showTooltip ?? true"
							:effect="item.tooltipProps?.effect || 'dark'"
							:content="item.tooltipProps?.content || ''"
							:raw-content="item.tooltipProps?.rawContent || false"
							:placement="item.tooltipProps?.placement || 'top-start'"
						>
							<el-select
								class="flex1"
								:mode="item.mode || 'default'"
								style="width: 100%"
								:multiple="item.multiple"
								:filterable="item.filterable || true"
								:clearable="item.clearable || true"
								:disabled="setDisabled(item)"
								v-model="hyForm[key]"
								:placeholder="setPlaceholder(item, '选择')"
								@change="
                    (option:Event)  => {
                      item.change ? item.change(option) : null;
                    }
                  "
							>
								<el-option v-for="option in item.options" :key="option.key || option.value" :label="option.label" :value="option.value" />
							</el-select>
						</el-tooltip>
						<span
							v-if="item.append"
							style="
								background-color: #f5f7fa;
								color: #909399;
								display: inline-block;
								border: 1px solid #dcdfe6;
								border-radius: 4px;
								padding: 0 20px;
								height: 40px;
								line-height: 40px;
							"
						>
							{{ item.append }}
						</span>
					</el-form-item>
				</el-col>
				<!-- 日期选择 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :offset="setOffset(item)" :key="`${key}_col`" v-if="setRemove(item, 'date')">
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-date-picker
							:key="key"
							@focus="(e:Event) => setFocus(item, e)"
							@blur="(e:Event)  => setBlur(item, e)"
							@change="(e:Event)  => setChange(item, e)"
							:disabled="setDisabled(item)"
							v-model="hyForm[key]"
							:type="item.picker || 'date'"
							:format="item.showFormat || 'YYYY-MM-DD HH:mm:ss'"
							:placeholder="setPlaceholder(item, '选择')"
							:value-format="item.valueFormat || item.showFormat || 'YYYY-MM-DD HH:mm:ss'"
							style="width: 100%"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:picker-options="item.pickerOptions || ''"
							:shortcuts="item.shortcuts || []"
							:default-time="item.defaultTime"
						/>
					</el-form-item>
				</el-col>
				<!-- 多行输入框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'textarea')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '输入')">
						<el-input
							type="textarea"
							show-word-limit
							:placeholder="setPlaceholder(item, '输入')"
							:disabled="setDisabled(item)"
							v-model="hyForm[key]"
							:rows="item.rows || 4"
							:maxlength="item.maxlength || 2000"
						/>
					</el-form-item>
				</el-col>
				<!-- 多选框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'checkBox')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-checkbox-group v-model="hyForm[key]" :disabled="item.disabled" :placeholder="setPlaceholder(item, '选择')">
							<el-checkbox v-for="option in item.options" :label="option.value" :key="option.value">{{ option.label }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<!-- 级联 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'cascader')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-cascader
							:placeholder="setPlaceholder(item, '选择')"
							:disabled="setDisabled(item)"
							v-model="hyForm[key]"
							:options="item.options || []"
							:props="item.props || {}"
							:show-all-levels="item.showAllLevels || false"
							:clearable="item.clearable || true"
							collapse-tags
							style="width: 100%"
							filterable
						/>
					</el-form-item>
				</el-col>
				<!-- 树选择框 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'tree-select')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-tree-select
							:ref="key"
							:clearable="item.clearable || true"
							filterable
							:placeholder="setPlaceholder(item, '选择')"
							:disabled="setDisabled(item)"
							v-model="hyForm[key]"
							:data="item.options"
							:multiple="item.multiple || false"
							:render-after-expand="false"
							:setCheckedKeys="item.setCheckedKeys"
							:default-checked-keys="item.defaulCheckedKeys || []"
							:show-checkbox="item.showCheckbox ?? true"
							@remove-tag="(option:any)  => {
                      item.remove ? item.remove(option) : null;
                    }"
							@check="
                    (option:any,data?:any)  => {
                      item.check ? item.check(option,data) : null;
                    }
                  "
							@node-click=" (option:any,data?:any)  => {
                      item.nodeCheck ? item.nodeCheck(option,data) : null;
                    }"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<!-- 上传 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'upload')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '上传')">
						<TsyUploadFile
							:fileType="item.fileType"
							:fileSize="item.fileSize"
							:limit="item.limit"
							:type="item.showWay"
							v-model="hyForm[key]"
							:uploadFileUrl="item.uploadFileUrl"
						/>
					</el-form-item>
				</el-col>
				<!-- 下载 -->
				<!-- <el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'downLoad')"
				>
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '上传')">
						<ExcelDownLoad
						:url="item.url"
						:title="item.title"
						:tempUrl="item.tempUrl"
							v-model="hyForm[key]"
						/>
					</el-form-item>
				</el-col> -->
				<!-- 下拉菜单 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'dropdown')"
				>
					<el-dropdown>
						<el-button type="primary">
							{{ item.lable }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item
									v-for="option in item.options"
									:key="option.key || option.value"
									:value="option.value"
									@click="clickDropdown(option.value)"
									>{{ option.label }}</el-dropdown-item
								>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-col>
				<!-- 按钮 -->
				<el-col
					class="col"
					v-show="!item.hidden"
					:span="setSpan(item)"
					:offset="setOffset(item)"
					:key="`${key}_col`"
					v-if="setRemove(item, 'button')"
				>
					<el-button @click="clickDropdown" type="primary">
						{{ item.lable }}
					</el-button>
				</el-col>
				<!-- 下拉标签 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :offset="setOffset(item)" :key="`${key}_col`" v-if="setRemove(item, 'tag')">
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '选择')">
						<el-select
							class="flex1"
							:mode="item.mode || 'default'"
							style="width: 100%"
							multiple
							filterable
							:clearable="item.clearable || true"
							:disabled="setDisabled(item)"
							v-model="hyForm[key]"
							:placeholder="setPlaceholder(item, '选择')"
							@change="
                    (option:Event)  => {
                      item.change ? item.change(option) : null;
                    }"
						>
							<el-option v-for="option in item.options" :key="option.key || option.value" :label="option.label" :value="option.value" />
						</el-select>
						<span
							v-if="item.append"
							style="
								background-color: #f5f7fa;
								color: #909399;
								display: inline-block;
								border: 1px solid #dcdfe6;
								border-radius: 4px;
								padding: 0 20px;
								height: 40px;
								line-height: 40px;
							"
						>
							{{ item.append }}
						</span>
					</el-form-item>
				</el-col>
				<!-- 表格 -->
				<el-col class="col" v-show="!item.hidden" :span="setSpan(item)" :offset="setOffset(item)" :key="`${key}_col`" v-if="setRemove(item, 'table')">
					<el-form-item :prop="key" :label="item.label" :label-width="setLabelWidth(item)" :rules="setRule(item, '输入')">
						<el-table highlight-current-row :data="item.tableData" :rows="item.rows || 4" row-key="id" border default-expand-all>
							<el-table-column type="index" label="序号" width="70" />
							<el-table-column prop="date" label="Date" sortable />
							<el-table-column prop="name" label="Name" sortable>
								<template #default="scope">
									<el-input placeholder="111"></el-input>
									<!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> Edit </el-button>
									<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"> Delete </el-button> -->
								</template>
							</el-table-column>
							<el-table-column prop="address" label="Address" sortable />
							<el-table-column label="操作">
								<template #default="scope">
									<!-- <el-input placeholder="111"></el-input> -->
									<el-button link size="small" type="primary" @click="addChildren(scope.$index, scope.row, 'same')"> 新增同级费用 </el-button>
									<el-button link size="small" type="primary" @click="handleDelete(scope.$index, scope.row)"> 新增下级费用 </el-button>
									<el-button link size="small" type="primary" @click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
			</template>
			<!-- 插槽，自定义内容-->
			<slot name="custom"></slot>
		</el-row>
	</el-form>
</template>

<script lang="ts" setup>
import { ref, watch, toRefs } from 'vue';
import TsyUploadFile from '/@/components/Upload/TsyIndex.vue';
import ExcelDownLoad from '/@/components/Upload/Excel.vue';
const props = defineProps({
	hyFormConfig: {
		type: Object,
		default: () => {
			return {
				labelWidth: '120px',
				span: 11,
				offset: 0,
				type: 'submit',
			};
		},
	},
	hyFormFields: {
		default: () => {},
		type: Object,
	},
	hyFormDefault: {
		default: () => {},
		type: Object,
	},
});
const { hyFormFields, hyFormConfig } = toRefs(props);
interface Iitem {
	type: string;
	prop: string;
	max?: number;
	min?: number;
	label: string;
	rules?: any[];
	hidden?: boolean;
	span?: number;
	offset?: number;
	picker?: string;
	showFormat?: string;
	valueFormat?: string;
	pickerOptions?: any;
	rows?: number;
	maxlength?: number;
	disabled?: boolean;
	placeholder?: string;
	options?: any[];
	required?: false;
	remove?: boolean;
	labelWidth?: string;
	multiple?: boolean;
	hiddenTooltip?: boolean;
	tooltipProps?: any;
	fileSize?: number;
	limit?: number;
	fileType?: string[];
	showWay?: string;
	focus?: (e: Event) => {};
	blur?: (e: Event) => {};
	change?: (e: Event) => {};
	click?: (e: Event) => {};
}

// 初始化表单
const hyForm = ref<any>({});
const init = (data: any) => {
	if (data && Object.keys(data).length > 0)
		Object.keys(data).forEach((key) => {
			if (!data[key]) {
			} else {
				hyForm.value[key] = data[key];
			}
		});
};
const tableData = ref([
	{
		id: 1,
		date: '2016-05-02',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		id: 2,
		date: '2016-05-04',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		id: 3,
		date: '2016-05-01',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
		children: [
			{
				id: 31,
				date: '2016-05-01',
				name: 'wangxiaohu',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				id: 32,
				date: '2016-05-01',
				name: 'wangxiaohu',
				address: 'No. 189, Grove St, Los Angeles',
			},
		],
	},
	{
		id: 4,
		date: '2016-05-03',
		name: 'wangxiaohu',
		address: 'No. 189, Grove St, Los Angeles',
	},
]);
const emit = defineEmits(['clickDropdown', 'addChildren']);
watch(
	() => props.hyFormDefault,
	(newVal) => {
		init(newVal);
	},
	{ immediate: true, deep: true }
);
const addChildren = (val?: any, data?: any, str?: string) => {
	emit('addChildren', val, data, str);
	console.log(val);
};
const setRemove = (item: Iitem, type: string) => {
	if (item.type === type && item?.remove !== true) return true;
	return false;
};
const setSpan = (item: Iitem) => {
	return item.span || hyFormConfig.value.span;
};
const setOffset = (item: Iitem) => {
	return item.offset || 0;
};
const setRule = (item: Iitem, desc: string) => {
	if (hyFormConfig.value.type === 'view') return [];
	if (hyFormConfig.value.type === 'search') {
		if (item.rules && item.rules.length > 0) {
			return [
				...item.rules,
				{
					required: false,
				},
			];
		}
		return {
			required: false,
		};
	}
	if (hyFormConfig.value.type === 'submit') {
		//只有必输条件 eg:年龄必输
		if (item.required && !item.rules) {
			return [
				{
					required: item.required,
					message: `请${desc}${item.label || '此项内容'}`,
					trigger: ['blur', 'change'],
				},
			];
		}
		//必输，并且有其他条件 eg:年龄必输，并且要超过18岁
		if (item.required && item.rules && item.rules.length > 0) {
			return [
				...item.rules,
				{
					required: item.required,
					message: `请${desc}${item.label || '此项内容'}`,
					trigger: ['change', 'blur'],
				},
			];
		}
		//非必输，有其他条件 eg:年龄非必输，超过18岁
		if (item.rules && item.rules.length > 0) {
			return [
				...item.rules,
				{
					required: item.required,
					message: `请${desc}${item.label || '此项内容'}`,
					trigger: ['change', 'blur'],
				},
			];
		}
	}
};
const setLabelWidth = (item: Iitem) => {
	return item?.labelWidth || hyFormConfig.value.labelWidth;
};
const setDisabled = (item: Iitem) => {
	if (hyFormConfig.value.type === 'view') return true;
	else return item.disabled || false;
};
const setPlaceholder = (item: Iitem, desc: string) => {
	if (item.placeholder) return item.placeholder;
	if (hyFormConfig.value.type === 'submit') {
		return `请${desc}${item.label}`;
	}
	return '';
};
const setFocus = (item: Iitem, e: Event) => {
	if (item.focus) return item.focus(e);
	return null;
};
const setBlur = (item: Iitem, e: Event) => {
	if (item.blur) return item.blur(e);
	return null;
};
const setClick = (item: Iitem, e: Event) => {
	if (item.click) return item.click(e);
	return null;
};
const setChange = (item: Iitem, e: Event) => {
	if (item.change) return item.change(e);
	return null;
};
// ref提升,hyFormRef方法暴露到实力上。
const hyFormRef = ref<any>(null);
const refUp = () => {
	const instance: any = getCurrentInstance();
	const entries = Object.entries(hyFormRef.value.$.exposed);
	for (const [key, value] of entries) {
		instance.exposed[key] = value;
	}
};
onMounted(() => {
	refUp();
});
//表单校验
const check = async () => {
	return hyFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			setTimeout(() => {
				const el = document.querySelectorAll('.el-form-item__error')[0];
				el.scrollIntoView({ block: 'center', behavior: 'smooth' });
			}, 100);
		}
		return valid;
	});
};
//下拉菜单传递参数判断逻辑
const clickDropdown = () => {
	emit('clickDropdown');
};

defineExpose({ hyForm, check });
</script>
<style scoped lang="scss">
.col {
	margin-bottom: 24px;
}
.buildForm {
	width: 100%;
	.el-row {
		display: flex;
		flex-wrap: wrap;
	}
	.el-col {
		display: flex;
		align-items: center;
		.el-form-item {
			display: flex;
			flex: 1;
			:deep(.el-form-item__content) {
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 0 !important;
			}
			:deep(.el-date-editor .el-range__close-icon) {
				position: absolute;
				right: 16px;
				top: 2px;
			}
		}
	}
}

:deep(.el-input.is-disabled .el-input__inner) {
	-webkit-text-fill-color: #000 !important;
}
:deep(.el-select__wrapper.is-disabled) {
	background-color: #fff;
	border: none;
	box-shadow: none;
}
:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
	-webkit-text-fill-color: #000 !important;
}
:deep(.el-select__wrapper.is-disabled:hover) {
	background-color: #fff;
	border: none;
	box-shadow: none;
}
:deep(.el-select__wrapper.is-disabled .el-select__caret, .el-select__wrapper.is-disabled .el-tag) {
	display: none;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
	background-color: #fff;
	border: none;
	box-shadow: none;
	color: #000;
}

:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
:deep(.el-form-item--default .el-form-item__label) {
	line-height: 20px;
	align-items: center;
}
</style>
